<template>
  <div class="vipdetail">
    <Header></Header>
    <div class="vip2">
      <div>
        <img src="../assets/img/back/vip.png" style="width: 1200px" alt="">
      </div>
      <div class="vipcard-list">
        <div class="vip_card">
          <img :src="vipcard.img" alt="">
          <div class="vip3">
            <h4 style="font-weight: bold">{{ vipcard.cardname }}</h4>
            <p>描述：{{ vipcard.content }}</p>
            <p>价格：{{ vipcard.price }}￥</p>
            <el-button type="primary" round @click="buy_now" :disabled="isDisable">立即购买</el-button>
          </div>

        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "VipDetail",
  data() {
    return {
      vipcard: [],
      isDisable:false
    }
  },
  components: {
    Header,
    Footer,

  },
  methods: {
    buy_now() {
      this.isDisable=true
       setTimeout(()=>{
           this.isDisable=false   //点击一次时隔两秒后才能再次点击
       },3000);
      if (this.$cookies.get('token')) {
        this.$http.post(`${this.$settings.base_url}order/pay/`, {
          subject: this.vipcard.cardname,
          total_amount: this.vipcard.price,
          pay_type: 1,
          vipcards: [this.vipcard.id,]
        }, {
          headers: {
            Authorization: 'jwt ' + this.$cookies.get('token')
          }
        }).then(response => {
          let pay_url = response.data.pay_url
          open(pay_url, '_self')
        })
      } else {
        this.$message({
          message: "对不起，您没有登录，请先登录！"
        });
      }
    },
    get_vipcard_id() {
      // 获取地址栏上面的课程ID
      this.vipcard_id = this.$route.params.pk
      if (this.vipcard_id < 1) {
        let _this = this;
        _this.$alert("对不起，vipcard不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          }
        });
      }
    },

  },
  created() {
    this.get_vipcard_id();
    this.$http.get(`${this.$settings.base_url}vip/vipcard/${this.vipcard_id}`).then(res => {
      this.vipcard = res.data
      console.log(this.vipcard)
    })
  }
}
</script>

<style scoped>
.vip2 {
  width: 1200px;
  margin: 0 auto;
}

.vip3 {
  float: right;
  width: 300px;
  height: 180px;
  text-align: left;
  color: red;
}

.vip3 p {
  line-height: 50px;
}

.vip_card {
  margin-top: 55px;
}

.vipcard-list {
  width: 900px;
  height: 382px;
  margin: 5px auto;
}
</style>